<template>
  <div class="nav_outer">
    <Header>用工详情</Header>
    <div class="content">
      <div class="jobdes">
          <h4>7天短工任务</h4>
          <span class="price">¥ 5000</span>
          <div class="flex_bet">
              <span style="font-size:0.9em;">蓝锋电子科技有限公司</span>
              <span style="font-size:0.9em;color:#AEAFAF;">江苏省·苏州市</span>
          </div>
      </div>
      <div class="jobrequires">
          <div class="jobrequire">
              <h5>任职要求</h5>
              <p class="flex_bet">
                  <span>性别:不限</span>
                  <span>年龄: 18-35周岁</span>
              </p>
              <p class="flex_bet">
                  <span>其他要求: 认识26个英文字母</span>
              </p>
          </div>
          <div class="jobrequire">
              <h5>工作介绍</h5>
              <p>工作方式: 白班、夜班</p>
              <p>工作时间: 8:00-19:00</p>
              <p>工作内容: 组装、包装、测试、收发料</p>
          </div>
          <div class="jobrequire">
              <h5>企业简介</h5>
              <p>吴江欧普照明有限公司办公室地址位于交通便利的吴江吴江
                汾湖经济开发区汾阳路东侧，于2011-10-09在吴江工商局
                注册成立，公司已经发展壮大的八年，愿与社会各界同仁携
                手合作，谋求共同发展，继续为新老客户提供优秀的产品服
                务。</p>
          </div>
      </div>

      <div class="bttomtab flex_auto">
          <div class="tab">
              <img src="../assets/img/icon-test@2x.png" alt="">
              <p>客服</p>
          </div>
          <div class="tab">
              <img src="../assets/img/shoucang@2x.png" alt="">
              <p>收藏</p>
          </div>
          <div class="getbtn">立即领取</div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {

    }
  },
  mounted() {
    
  },
  methods: {

  },
  components: {
      Header
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .jobdes{
      padding: px2em(26) px2em(30);
      background: #fff;
      margin: 2px 0;
      .price{
          font-size: 1.2em;
          color: #FF0000;
          margin: px2em(24) 0;
          display: block;
      }
  }
  .jobrequire{
      background: #fff;
      padding: px2em(26);
      h5{
          background: url(../assets/img/mark@2x.png) no-repeat;
          left: 0;
          top: 0;
          background-size: px2em(26) auto;
          padding: 6px;
          font-size: 1.2em;
          font-weight: bold;
          color: #333;
      }
      p{
          color: #333;
          margin-bottom: 5px;
          padding-left: 6px;
      }
  }
  .bttomtab{
      background: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      .tab{
          width:px2em(110);
          text-align: center;
          >p{
              margin-bottom: 0;
            font-size: 0.7em;
            font-weight: bold;
            color: #333;
          }
      }
      img{
          height: px2em(32);
          margin-top: px2em(16);
      }
      .getbtn{
          height: px2em(72);
          line-height: px2em(72);
          color: #fff;
          text-align: center;
          background: #FFAF1C;
          flex: 1;
          border-radius: 10px;
          margin: px2em(14) px2em(32);
          &.join{
              background: #CDCDCD;
          }
      }
  }
</style>